<!-- 比赛列表 -->
<template>
  <div class="app-container">
    <el-card class="box-card">
      <!-- 比赛信息表 -->
      <el-table
        :header-cell-style="{ background: '#B6DBF2', color: '#606266' }"
        :data="contestTable"
        style="width: 100%"
      >
        <el-table-column prop="contestName" label="比赛游戏"> </el-table-column>
        <el-table-column prop="contestMerchants" label="比赛供应商">
        </el-table-column>
        <el-table-column prop="startTime" label="比赛时间"> </el-table-column>
        <el-table-column prop="signupTotal" label="参赛人数"> </el-table-column>
        <el-table-column
          prop="contestState"
          label="标签"
          :filters="[
            { text: '未开始', value: '未开始' },
            { text: '进行中', value: '进行中' },
            { text: '已结束', value: '已结束' },
          ]"
          :filter-method="filterTag"
          filter-placement="bottom-end"
        >
          <template slot-scope="scope">
            <el-tag
              :type="
                scope.row.contestState === '已结束' ? 'warning' : 'success'
              "
              >{{ scope.row.contestState }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="open(scope.row)"
              >查看比赛玩家</el-button
            >
            <el-dialog
              title="参赛比赛玩家列表"
              :visible.sync="dialogTableVisible"
            >
              <el-table :data="ucenter">
                <el-table-column
                  property="nickname"
                  label="昵称"
                ></el-table-column>
                <el-table-column
                  property="mobile"
                  label="手机号"
                ></el-table-column>
                <el-table-column
                  property="openid"
                  label="微信"
                ></el-table-column>
              </el-table>
            </el-dialog>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页条区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[2, 3, 5, 10]"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import conteststartApi from "@/api/merchant/conteststart";
import ucenterMemberApi from "@/api/ucenter/ucenterMember";

export default {
  data() {
    return {
      // 所有比赛数据
      contestTable: [],
      current: 1,
      limit: 5,
      name: "",
      // 总页数
      total: 0,
      // 查看玩家弹框
      dialogTableVisible: false,
      // 存放玩家列表
      ucenter: [],
    };
  },
  methods: {
    // 分页查询比赛列表
    getContestPage() {
      conteststartApi
        .getContestTablePageState(this.current, this.limit, this.name)
        .then((response) => {
          if (response.code !== 200)
            return this.$message.error("加载比赛列表失败");
          this.contestTable = response.data.rows;
          this.total = response.data.total;
        });
    },
    // 页数查询
    handleSizeChange(val) {
      this.limit = val;
      this.getContestPage();
    },
    // 当前页查询
    handleCurrentChange(val) {
      this.current = val;
      this.getContestPage();
    },
    // 标签弹框筛选
    filterTag(value, row) {
      return row.contestState === value;
    },
    // 打开查看玩家弹框
    open(data) {
      this.dialogTableVisible = true;
      ucenterMemberApi.getParameterByContestId(data.id).then((response) => {
        if (response.code !== 200)
          return this.$message.error("加载玩家列表失败");
        this.ucenter = response.data.items;
      });
    },
  },
  created() {
    // 查询比赛列表
    this.getContestPage();
  },
};
</script>
<style scoped>
.box-card {
  background-color: #ffcc9a;
}
</style>